<template>
  <div :style="{ height: height, width: width }" id="map" class="map"></div>
</template>

<script>
import markerRed from "@/assets/images/map/marker-icon/camera32.png";
import { detailsInfo, listWarn } from "@/api/combatUser/alarmInformation";

export default {
  props: {
    height: {
      type: String,
      default: "1000px",
    },
    width: {
      type: String,
      default: "100%",
    },
    center: {
      type: Object,
      //台湾  台中市
      default: () => ({ lng: 120.25892022454639, lat: 24.195578777484076 }),
    },
    zoom: {
      type: Number,
      default: 10,
    },
    enableScrollWheelZoom: {
      type: Boolean,
      default: true,
    },
    nightMode: {
      type: Boolean,
      default: true,
    },
    markers: {
      type: Array,
      default: () => [
        {
          lng: 121.509062,
          lat: 25.044332,
          color: "yellow",
          params: { name: "摄像头地址" },
        },
      ],
    },
  },
  watch: {
    center(newVal, oldVal) {
      var centerPoint = new BMap.Point(newVal.lng, newVal.lat);
      this.map.setCenter(centerPoint);
    },
  },
  data() {
    return {
      pointInfo: [],
      map: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    clearOverlays() {
      this.map.clearOverlays();
    },
    initMap() {
      const map = new BMap.Map("map"); // 创建地图实例
      const point = new BMap.Point(this.center.lng, this.center.lat); // 创建点坐标
      map.centerAndZoom(point, this.zoom); // 初始化地图，设置中心点坐标和地图级别
      map.enableScrollWheelZoom(this.enableScrollWheelZoom); // 开启鼠标滚轮缩放
      map.setMapStyle({ style: "midnight" });
      this.map = map;
    },
    //从外部传进来的数据 进行标点
    setData(data) {
      console.log("百度地图datadatadata", data);
      this.pointInfo = data.points;
      this.addMarkersPoint();
    },
    //标点的具体实现
    addMarkersPoint() {
      this.pointInfo.forEach((markerData) => {
        console.log("markerDatamarkerDatamarkerData", markerData);
        const point = new BMap.Point(markerData.lng, markerData.lat);
        // Create a custom icon
        let img = "";
        switch (markerData.color) {
          case "red":
            img = require("@/assets/xd/userPositioningRed.png");
            break;
          case "blue":
            img = require("@/assets/xd/userPositioningGreen.png");
            break;
          case "yellow":
            img = require("@/assets/xd/userPositioningYellow.png");
            break;
          default:
            img = require("@/assets/xd/location4.png");
            break;
        }
        const icon = new BMap.Icon(img, new BMap.Size(100, 100)); // Adjust size as needed
        icon.setImageSize(new BMap.Size(80, 80));

        // Create a marker with the custom icon
        const marker = new BMap.Marker(point, { icon: icon });

        this.map.addOverlay(marker); // 将标注添加到地图中
        // 创建文本标注对象
        var label = new BMap.Label(markerData.params.name, {
          // 设置文本偏移量
          offset: new BMap.Size(16, 5),
        });
        // 自定义文本标注样式
        label.setStyle({
          background: "none",
          color: "#fff",
          border: "none",
        });
        // 显示在标记点
        marker.setLabel(label);

        if (markerData.params.name == "定位地址") {
          const content = `<div>
                <h4 class="BMap_title">预警信息</h4>
                <p class="BMap_content">定位地点: ${markerData.params.locationPos}</p>
                <p class="BMap_content">定位依据: ${markerData.params.locationBasis}</p>
                <p class="BMap_content">经纬度: (${markerData.params.locationLon}, ${markerData.params.locationLat})</p>
                <p class="BMap_content1">泄露地点: <span>${markerData.params.locationLeak}</span></p>
                <button class="BMap_btn" type="button" id="markerClick" data-id="${markerData.params.id}">抗定位</button>
                <button class="BMap_btn" type="button" id="markerClick2" data-userId="${markerData.params.userid}" data-id="${markerData.params.useredId}">详情</button>
              </div>`;
          this.addClickHandler(content, marker);
        }

        if (markerData.params.radiusFlag) {
          // 圆心坐标
          const centerPoint = new BMap.Point(markerData.lng, markerData.lat);
          // 圆的半径（单位：米）
          const radius = markerData.params.radius;
          // 创建圆形覆盖物
          const circle = new BMap.Circle(centerPoint, radius, {
            strokeColor: "blue", // 边线颜色
            fillColor: "#2C5887", // 填充颜色
            strokeWeight: 3, // 边线的宽度
            strokeOpacity: 0.8, // 边线透明度
            fillOpacity: 0.4, // 填充的透明度
            strokeStyle: "solid", // 边线的样式，solid或dashed
          });
          this.map.addOverlay(circle);
        }
      });
    },
    addClickHandler(content, marker) {
      marker.addEventListener("click", (e) => {
        this.openInfo(content, e);
      });
    },
    openInfo(content, e) {
      var p = e.target;
      var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
      var infoWindow = new BMap.InfoWindow(content); // 创建信息窗口对象
      this.map.openInfoWindow(infoWindow, point); //开启信息窗口
      //判断窗口的打开状态
      if (!infoWindow.isOpen()) {
        //如果没有打开，则监听打开事件，获取按钮，添加事件
        infoWindow.addEventListener("open", () => {
          document.getElementById("markerClick").onclick = (e) => {
            // console.log("点击打开", e.target.dataset.id);
            detailsInfo(e.target.dataset.id).then((res) => {
              if (res.code == 200) {
                this.$emit("markerClick", res.data);
              }
            });
          };
          document.getElementById("markerClick2").onclick = (e) => {
            console.log("点击打开2", e);
            //路由跳转
            this.$router.push({
              path: "/networkUser/userDetails",
              query: {
                id: e.target.dataset.id,
                userId: e.target.dataset.userid,
              },
            });
          };
        });
      } else {
        //如果已经打开，直接获取按钮，添加事件
        document.getElementById("markerClick").onclick = (e) => {
          console.log("点击打开3", e.target.dataset.id);
          detailsInfo(e.target.dataset.id).then((res) => {
            if (res.code == 200) {
              this.$emit("markerClick", res.data);
            }
          });
        };
        document.getElementById("markerClick2").onclick = (e) => {
          console.log("点击打开4", e);
          //路由跳转
          this.$router.push({
            path: "/networkUser/userDetails",
            query: {
              id: e.target.dataset.id,
              userId: e.target.dataset.userid,
            },
          });
        };
      }
    },

    toantiLocalizationdetail(id) {
      this.$router.push(`/positionAnalysis/cameraManagementD?id=${id}`);
    },
    videoInfo(id) {
      this.pointInfo.forEach((item) => {
        if (item.id == id) {
          window.open(item.cameraViewurl, "_blank", "width=600,height=400");
        }
      });
    },
    //坐标转换
    convertCoordinates(lng, lat) {
      // Example of a coordinate conversion method
      // This is a placeholder for actual conversion logic
      return { lng: lng + 0.1, lat: lat + 0.1 };
    },
    setCenter(lng, lat) {
      const point = new BMap.Point(lng, lat);
      this.map.centerAndZoom(point, this.zoom);
    },
  },
};
</script>

<style>
.map {
  width: 100%;
  height: 500px;
}

/*地图标题 infoWindow*/
.BMap_bubble_title {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  background: transparent !important;
}

.BMap_pop .BMap_top {
  background: #1f4f86b5 !important;
  border: 0 !important;
}

.BMap_pop .BMap_center {
  /* width: 281px !important;s */
  border: 0 !important;
  background: #1f4f86b5 !important;
}

.BMap_pop .BMap_bottom {
  border: 0 !important;
  background: #1f4f86b5 !important;
}

.BMap_title {
  color: #fff;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  background: transparent !important;
  display: flex;
  justify-content: center;
}

.BMap_content {
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  background: transparent !important;
}

.BMap_content1 {
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  background: transparent !important;

  span {
    color: red;
  }
}

.BMap_btn {
}

.BMap_pop div:nth-child(3) {
  background: transparent !important;
}

.BMap_pop div:nth-child(3) div {
  border-radius: 3px;
  background: #1f4f86b5 !important;
  border: 0 !important;
}

.BMap_pop div:nth-child(1) {
  border-radius: 3px 0 0 0;
  background: transparent !important;
  border: 0 !important;
}

.BMap_pop div:nth-child(1) div {
  background: #1f4f86b5 !important;
}

.BMap_pop div:nth-child(5) {
  border-radius: 0 0 0 3px;
  background: transparent !important;
  border: 0 !important;
}

.BMap_pop div:nth-child(5) div {
  border-radius: 3px;
  background: #1f4f86b5 !important;
}

.BMap_pop div:nth-child(7) {
  background: transparent !important;
  left: 226px;
}

.BMap_pop div:nth-child(7) div {
  border-radius: 3px;
  background: #1f4f86b5 !important;
}

/*替换箭头*/
/* img[src="http://api0.map.bdimg.com/images/iw3.png"] {
      content: url('../images/iw3.png');
  }
  
  img[src="https://api.map.baidu.com/images/iw3.png"] {
      opacity: 0.7;
      margin-top: -692px !important;
      filter: alpha(opacity=70);
      content: url('../images/iw3.png');
  } */
</style>
